@import url('normalize.css');
@import url('demo.css');

#chart-container {
	width: 1000px; 
	margin: 0 auto 50px auto;
	background: rgba(255,255,255,0.5);
	box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
	padding: 20px 30px;
}

#chart-container h2 {
	color: #444;
	margin: 0 0 10px;
	font-weight: 300;
	padding: 10px;
	text-shadow: 0 1px 1px rgba(255,255,255,0.8);
	font-size: 24px;
}

svg {
	font-family: 'Lato', Arial, serif;
	font-size: 10px;
	font-weight: 700;
	text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

text.country-title {
	font-size: 20px;
}

text.instructions {
	font-size: 16px;
}

g.context g.brush rect.background {
	fill: rgba(0,0,0,.1);
}

g.context g.axis path {
	stroke-opacity: 0;
}

g.context g.axis line {
	stroke-opacity: .1;
}

g.france path.chart {
	fill: rgba(127,201,127,0.5);
}

g.germany path.chart {
	fill: rgba(127,201,174,0.5);
}

g.japan path.chart {
	fill: rgba(127,183,201,0.5);
}

g.uk path.chart {
	fill: rgba(127,130,201,0.5);
}

g.usa path.chart {
	fill: rgba(171,127,201,0.5);
}

.axis path, .axis line {
	fill: none;
	stroke: #aaa;
	shape-rendering: crispEdges;
}

.brush .extent {
	stroke: #f09f8c;
	fill-opacity: .125;
	shape-rendering: crispEdges;
}

g.context rect.background{
	fill: rgb(200,200,255);
	visibility: visible !important;
}​